<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" size="mini" @click="delAll">批量删除</el-button>
        <el-input v-model="select_word" size="mini" placeholder="筛选关键字" class="handle-input"></el-input>
        <el-button type="primary" size="mini" @click="centerDialogVisible=true">添加歌单</el-button>
      </div>
    </div>
    <el-table size="mini" border style="width: 100%" height="500px" :data="data" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40"  ></el-table-column>
      <el-table-column label="歌单图片" width="110" align="center">
        <template slot-scope="scope"><!--scope当前的单元格-->
          <div class="songList-img">
            <img :src="getUrl(scope.row.pic)" style="width:100%"   alt=""/>
          </div>
          <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeAvatorUpload"  :on-success="handleAvatorSuccess">
            <el-button size="mini">更新图片</el-button>

          </el-upload>
        </template>
      </el-table-column>

      <el-table-column prop="title" label="标题" width="120px" align="center">

      </el-table-column>

      <el-table-column prop="introduction" label="歌单简介"  width="120px" align="center">

      </el-table-column>
      <el-table-column prop="style" label="风格"  width="120px" align="center">

      </el-table-column>

      <el-table-column   label="歌单管理"  width="120px" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="songEdit(scope.row.id,scope.row.name)">歌单管理</el-button>
        </template>
      </el-table-column>

      <el-table-column  label="操作"  width="150px" align="center">
        <template slot-scope="scope"><!--scope当前的单元格-->
          <el-button size="mini" @click="handlEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handldelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog title="添加歌单" :visible.sync="centerDialogVisible" width="400px" center>
      <el-form :model="registerForm" ref="registerForm" label-width="80px">
        <el-form-item prop="title" lable="标题" size="mini">
          <el-input v-model="registerForm.title" placeholder="标题"></el-input>
        </el-form-item>

        <el-form-item prop="introduction" lable="歌单简介" size="mini">
          <el-input v-model="registerForm.introduction" placeholder="歌单简介" style="height: 100px;overflow: scroll" type="textarea" ></el-input>
        </el-form-item>
        <el-form-item prop="style" lable="风格" size="mini">
          <el-input v-model="registerForm.style" placeholder="风格" style="height: 100px;overflow: scroll" type="textarea" ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="centerDialogVisible=false" >取消</el-button>
      <el-button type="primary" size="mini" @click="addsongList" >确定</el-button>
    </el-dialog>

    <el-dialog title="编辑歌单" :visible.sync="editVisible" width="400px" center>
      <el-form :model="editForm" ref="editForm" label-width="80px">
        <el-form-item prop="title" lable="标题" size="mini">
          <el-input v-model="editForm.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item prop="style" lable="风格" size="mini">
          <el-input v-model="editForm.style" placeholder="风格"></el-input>
        </el-form-item>
        <el-form-item prop="introduction" lable="歌单简介" size="mini">
          <el-input v-model="editForm.introduction" placeholder="歌单简介" style="height: 100px;overflow: scroll" type="textarea" ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="editVisible=false" >取消</el-button>
      <el-button type="primary" size="mini" @click="edit1songList" >确定</el-button>
    </el-dialog>
    <el-dialog title="删除歌单" :visible.sync="deleteVisible" width="400px" center>
      <div align="center">数据删除将不能恢复！确认删除?</div>
      <slot slot="footer">
        <el-button type="primary" size="mini" @click="deleteVisible=false" >取消</el-button>
        <el-button type="danger" size="mini" @click="delete1songList" >确定</el-button>
      </slot>
    </el-dialog>

  </div>
</template>


<script>
import {getAllSongList, setSongList} from '../api/index';

import {mixin} from "../mixins";
import {deleteSongList, editSongList} from "../api";

export default {
  name: "SongList",
  mixins:[mixin],
  data(){
    return{
      centerDialogVisible:false,
      editVisible:false,
      deleteVisible:false,//删除弹框
      registerForm:{//添加框
        tittle:'',
        style:'',
        introduction:''
      },
      editForm:{//编辑框
        id:'',
        title:'',
        style:'',

        introduction:''
      },
      tableData: [],
      select_word:'',
      tempData:[],
      gridIndex:-1,
      pageSize:5,//分页大小
      currentPage:1,//当前页,
      multipleSelection:[]//打钩的项多选
    }
  },

  computed:{
    data(){
      return this.tableData.slice((this.currentPage-1) * this.pageSize,this.currentPage*this.pageSize)
    }
  }  ,
  watch:{
    select_word:function () {
      if(this.select_word===''){
        this.tableData=this.tempData;
      }else {
        this.tableData=[];
        for (let item of this.tempData){
          if(item.title.includes(this.select_word)){
            this.tableData.push(item)

          }
        }
      }
    }
  },
  created() {
    this.getData();
  },
  methods:{
    handleSelectionChange(val){
      this.multipleSelection=val;
    },

    handleCurrentChange(val){
      this.currentPage=val;
    },
    getData(){
      this.tableData=[];
      this.tempData=[];
      getAllSongList().then(res=>{/*res是查询返回的值*/
        this.tableData=res;/*把查询返回的res的值赋值给tableData*/
        this.tempData=res;
        console.log(res)
      })
    },
    addsongList(){

      let params=new URLSearchParams();
      params.append('title',this.registerForm.title);
      params.append('style',this.registerForm.style);
      params.append('pic','/img/songList/4.jpg');
      params.append('introduction',this.registerForm.introduction);
      setSongList(params).then(res=>{
        this.getData();
        if(res.code==1){
          this.notify("添加成功","success");
        }else{
          this.notify("添加失败","error");
        }
      }).catch(err=>{
        console.log(err);
      });
      this.centerDialogVisible=false;
    },
    edit1songList(){

      let params=new URLSearchParams();
      params.append('id',this.editForm.id);
      params.append('title',this.editForm.title);
      params.append('style',this.editForm.style);
     // params.append('pic','/img/songList/4.jpg');
      params.append('introduction',this.editForm.introduction);
      editSongList(params).then(res=>{
        this.getData();
        if(res.code==1){
          this.notify("修改成功","success");
        }else{
          this.notify("修改失败","error");
        }
      }).catch(err=>{
        console.log(err);
      });
      this.editVisible=false;
    },
    //删除用户
    delete1songList(){
      deleteSongList(this.gridIndex).then(res=>{
        this.getData();
        if(res){
          this.notify("删除成功","success");
        }else{
          this.notify("删除失败","error");
        }
      }).catch(err=>{
        console.log(err);
      });
      this.deleteVisible=false;

    },

    delAll(){
      for(let item of this.multipleSelection){
        this.handldelete(item.id);
        this.delete1songList();
      }

      this.multipleSelection=[];
    },
    //更新图片
    uploadUrl(id){
      return `${this.$store.state.HOST}/songList/updateSigerPic?id=${id}`
    },
    handlEdit(row){
      this.editVisible=true;
      this.editForm={
        id:row.id,
        title:row.title,

        style:row.style,
        introduction:row.introduction
      }

    },
//转向歌曲页面
    songEdit(id,name){
      this.$router.push({path:`/listSong`,query:{id,name}});
    }



  }
}
</script>

<style scoped>
.handle-box{
  margin-bottom: 20px;
}
.songList-img{
  width: 100%;
  height: 80px;
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}

.pagination{
  display: flex;
  justify-content: center;
}
.handle-input{
  width: 300px;
  display: inline-block;
}
</style>
